// /**
//  * @description tab组件
//  * @author chenwenhao-576
//  * @date 2017-08-01
//  * @example
//  * info.html
//  *  <seed-content>
//        <seed-toolbar-header>
//          <seed-toolbar-title>资讯详情</seed-toolbar-title>
//          <seed-toolbar-menu></seed-toolbar-menu>
//        </seed-toolbar-header>
//
//        <seed-tab (tabSelect)="select($event)">
//          <seed-tab-item *ngFor="let tab of tabs"
//          [title] = "tab.title"
//          >
//          {{tab.content}}
//          </seed-tab-item>
//        </seed-tab>
//      </seed-content>
//  *
//  * infoComponent.ts
//  *
//  *  export class InfoComponent implements OnInit {
//  *    tabs:array<string[]>;
//  *
//  *    constructor(){
//  *      this.tabs = [
//           {title:'title1',content:'content1'},
//           {title:'title2',content:'content2'},
//           {title:'title3',content:'content3'}
//         ];
//  *    }
//  *
//  *    //如果每个tab里面的内容逻辑不同可以添加事件(tabSelect)
//  *    select($event) {
//  *      console.log($event); 输出点击的tab的index,通过相应的index调用不同的函数
//  *      $event && this[handlerTab[$event]]();
//  *    }
//  *
//  *    handlerTab0(){
//  *      //do someting...
//  *    }
//  *
//  *    handlerTab1(){
//  *      //do someting...
//  *    }
//  *
//  *    handlerTab2(){
//  *      //do someting...
//  *    }
//  *  ｝
//  *
//  *
//  *
//  */
// import {
//   Component, OnInit, ContentChildren, QueryList, AfterContentInit, AfterViewInit, Output,
//   EventEmitter, ViewEncapsulation
// } from '@angular/core';
// import {TabItemComponent} from "./tab-item/tab-item.component";
//
// @Component({
//   selector: 'seed-tab',
//   templateUrl: 'tab.component.html',
//   styleUrls: ['tab.component.scss'],
//   encapsulation: ViewEncapsulation.None
// })
// export class TabComponent implements AfterContentInit {
//   @Output()
//     tabSelect:EventEmitter<number> = new  EventEmitter();
//   @ContentChildren(TabItemComponent)
//     tabs:QueryList<TabItemComponent>;
//
//   constructor() { }
//
//   setActive(tab:TabItemComponent) {
//     this.tabs.toArray().forEach((t,i) => {
//       t.active = false;
//       t.index = i;
//     });
//     this.tabSelect.emit(tab.index);
//     tab.active = true;
//   }
//
//   ngAfterContentInit() {
//     setTimeout(() => this.setActive(this.tabs.toArray()[0]));
//   }
//
// }


import {ViewChild, ElementRef} from '@angular/core';
/**
 * @description tab组件
 * @author chenwenhao-576
 * @date 2017-08-01
 * @example
 * info.html
 *  <seed-content>
 <seed-toolbar-header>
 <seed-toolbar-title>资讯详情</seed-toolbar-title>
 <seed-toolbar-menu></seed-toolbar-menu>
 </seed-toolbar-header>

 <seed-tab (tabSelect)="select($event)">
 <seed-tab-item *ngFor="let tab of tabs"
 [title] = "tab.title"
 >
 {{tab.content}}
 </seed-tab-item>
 </seed-tab>
 </seed-content>
 *
 * infoComponent.ts
 *
 *  export class InfoComponent implements OnInit {
 *    tabs:array<string[]>;
 *
 *    constructor(){
 *      this.tabs = [
          {title:'title1',content:'content1'},
          {title:'title2',content:'content2'},
          {title:'title3',content:'content3'}
        ];
 *    }
 *
 *    //如果每个tab里面的内容逻辑不同可以添加事件(tabSelect)
 *    select($event) {
 *      console.log($event); 输出点击的tab的index,通过相应的index调用不同的函数
 *      $event && this[handlerTab[$event]]();
 *    }
 *
 *    handlerTab0(){
 *      //do someting...
 *    }
 *
 *    handlerTab1(){
 *      //do someting...
 *    }
 *
 *    handlerTab2(){
 *      //do someting...
 *    }
 *  ｝
 *
 *
 *
 */
import {
  Component, OnInit, ContentChildren, QueryList, AfterContentInit, AfterViewInit, Output,
  EventEmitter, ViewEncapsulation
} from '@angular/core';
import {TabItemComponent} from "./tab-item/tab-item.component";

@Component({
  selector: 'seed-tab',
  templateUrl: 'tab.component.html',
  styleUrls: ['tab.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TabComponent implements AfterContentInit {
  @Output()
  tabSelect: EventEmitter<Object> = new EventEmitter();
  @ContentChildren(TabItemComponent)
  tabs: QueryList<TabItemComponent>;
  @ViewChild('tab') tab: ElementRef;

  constructor() {
  }

  setActive(tab: TabItemComponent) {
    this.tabs.toArray().forEach((t, i) => {
      t.active = false;
      t.index = i;
    });
    const tabInfo = {
      index: tab.index,
      title: tab.title
    };
    this.tabSelect.emit(tabInfo);
    tab.active = true;
  }

  ngAfterContentInit() {
    setTimeout(() => this.setActive(this.tabs.toArray()[0]));
  }

}

